<template>
  <div class="father">
    <h3>父组件，</h3>
    <h4>我的车：{{ car }}</h4>
    <h4>儿子给的玩具：{{ toy }}</h4>
    <!-- 通过:来给子组件传递变量和方法，getToy方法在子组件被调用，并传参，在父组件可以直接赋值给声明的变量，然后响应式显示 -->
    <Son :car="car" :getToy="getToy" />
    <!-- 自定义事件 -->
    <Son2 @send-toy="toys" />
    <!-- 注意区分原生事件和自定义事件中的$event -->
    <button @click="toys">测试</button>
  </div>
</template>
<script lang="ts" setup>
import Son from "./son.vue";
import Son2 from "./son2.vue";
import { ref } from "vue";
// 数据
const car = ref("奔驰");
const toy = ref();
// 方法
function getToy(params: string) {
  toy.value = params;
}
function toys(params: any) {
  console.log(params, "这里是自定义事件传过来的参数");
}
</script>
<style scoped>
.father {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>